<template>
  <van-nav-bar class="nav" title="盲盒" right-text="参与记录" @click-right="onClickRight" />
  <div class="page">
    <div class="main">
      <div class="img">
        <img src="@/assets/box.png" alt="">
      </div>
      <div class="content">
        <div class="item" style="margin-bottom: 20px;">
          <div class="name">盲盒数量</div>
          <div class="num">100</div>
        </div>
        <div class="item" style="margin-bottom: 20px;">
          <div class="name">当前剩余数量</div>
          <div class="num">{{ initData.count }}</div>
        </div>
        <div class="item">
          <div class="name">当前地址资产</div>
          <div class="name">（BBL）</div>
          <div class="num">{{ initData.amount }}</div>
        </div>
        <div class="item">
          <div class="name">当前剩余可参与</div>
          <div class="name">（次数）</div>
          <div class="num">{{ SelfData.lotteryCount + SelfData.lotteryLimit }}</div>
        </div>
      </div>
      <div class="guize">
        <div class="label">规则：</div>
        <div class="tips">每天发放总量100BBL，一星到五星每天可以参与一次，普通用户每周三周日名参与一次。推荐一个有效账户，可以多参与两次。每次参与消耗一个BBL</div>
      </div>
      <van-button class="shouquan" block color="linear-gradient(90deg, #52A952, #40A5DB)" @click="draw"
        :disabled="(SelfData.lotteryCount + SelfData.lotteryLimit) && initData.count > 0 ? false : true">{{ btnTips
        }}</van-button>
    </div>
  </div>
  <van-popup v-model:show="show" closeable round>
    <div class="box">
      <div class="time">提示</div>
      <div class="img">
        <img src="@/assets/toupiao.png" alt="">
      </div>
      <div class="tipsMain">
        恭喜获得{{ numFrm }}BBL
      </div>
      <van-button class="shouquan" block color="linear-gradient(90deg, #52A952, #40A5DB)"
        @click="show = false; init()">确认</van-button>
    </div>
  </van-popup>
  <Tabbar :active="3"></Tabbar>
</template>
<script setup name="box" lang="ts">
import Tabbar from '@@/Tabbar';
import { useRouter } from "vue-router";
import { lotteryLast, accessSelf, lottery } from '@/api/request'
import { ref, getCurrentInstance, onMounted, computed, reactive } from 'vue'
import contractStore from '@/store/modules/contract'

interface box {
  amount: number,
  count: number,
  limitAmount: number,
}
interface initDataType {
  lotteryLimit: number,
  lotteryCount: number
}
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const appStore = contractStore()
const initData = reactive<box>({
  amount: 0,
  count: 0,
  limitAmount: 0
})
const SelfData = ref<initDataType>({
  lotteryLimit: 0,
  lotteryCount: 0
})
const show = ref(false)
const numFrm = ref(0)
onMounted(() => {
  proxy.userAuthorization(appStore, (res: boolean) => {
    if (res) {
      init()
    }
  })
})
const btnTips = computed(() => {
  if (SelfData.value.lotteryCount) {
    return '免费抽奖'
  } else if (SelfData.value.lotteryLimit) {
    return '每次抽奖消耗一个BBL'
  } else {
    return '暂无抽奖机会'
  }
})

const init = async () => {
  let res = await lotteryLast()
  if (res.status == 200) {
    initData.amount = res.data.amount
    initData.count = res.data.count
    initData.limitAmount = res.data.limitAmount
  }
  querySelf()
}
const querySelf = async () => {
  let val = await accessSelf()
  if (val.status == 200 && JSON.stringify(val.data) != '{}') {
    SelfData.value = val.data
    // lottery_count  lottery_limit
    // 盲盒免费抽奖次数  盲盒抽奖次数
  }
}
const draw = async () => {
  let res = await lottery()
  if (res.status == 200) {
    numFrm.value = res.data.reward
    show.value = true
  }
}
const onClickRight = () => {
  router.push('Record')
};
</script>
<style scoped lang="less">
.nav {
  :deep(.van-nav-bar__text) {
    color: #858585;
  }
}

.box {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;

  .tipsMain {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 32px;
  }

  .img {
    width: 155px;
    height: 120px;
    margin: 18px 52px;
  }

  .time {
    font-size: 25px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #000000;
  }
}

.page {
  background: #E9E9E9;
  min-height: calc(100vh - 50px);
  padding: 0 13px;
  padding-top: 13px;

  .main {
    background: #FFFFFF;
    border-radius: 15px;
    padding: 0 20px 26px 20px;

    .img {
      width: 249px;
      height: 160px;
      margin: auto;
      margin-bottom: 15px;
      padding-top: 34px;
    }

    .content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;

        .name {
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #767676;
          line-height: 28px;
        }

        .num {
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 800;
          color: #63A0FE;
          line-height: 28px;
        }
      }
    }

    .guize {
      margin-top: 27px;
      margin-bottom: 10px;

      .label {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #63A0FE;
        line-height: 1;
      }

      .tips {
        margin-top: 11px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 21px;
      }
    }
  }

}
</style>